<template>
	<view class="con">
		<!-- <view class="bg_balck"></view> -->
		<view class="topWrap">
			<view class="top flex flex_between">
				<view class="top1">
					<image class="top1_v1" :src="userInfo.lv_ico" mode="widthFix"></image>
					<view class="top1_v2">{{userInfo.nickName}}</view>
					<view class="top1_v3">尊贵的陌上未来{{userInfo.lv || ''}}{{userInfo.lv_name || ''}}</view>
				</view>
				<image class="top2" :src="userInfo.avatarUrl" mode="widthFix"></image>
			</view>
			<view class="zhen flex flex_between">
				<view class="zhen_z">
					<view class="zhen_z1">
						<view class="zhen_z1c"><text :style="{width:userInfo.zhitui_plan*100+'%'}"></text></view>
						<view class="zhen_z2">直推有效粉丝≥{{userInfo.zhitui_over || 0}}人</view>
					</view>
				</view>
				<view class="zhen_y" @click="goInvite">去邀请</view>
			</view>
		</view>
    <!-- 会员机制 -->
    <view class="danji">
      <view class="danji_t">会员机制</view>
      <view class="danjiC">
        <view class="danjiCli" :class="curIndex===1?'active':''" @click="curIndex=1">
          <view class="danjiCli_c flex">
            <view class="danjiCli_cz">
              <image class="danjiCli_cz_img" mode="widthFix" src="/static/mine/img39.png"></image>
            </view>
            <view class="danjiCli_cy">
              <view class="danjiCli_cy1">V1 繁星会员</view>
              <view class="danjiCli_cy3 flex">
                <view class="danjiCli_cy3_1"></view>
                <view class="danjiCli_cy3_2">20%教程销售分佣</view>
              </view>
            </view>
          </view>
          
        </view>
        <view class="danjiCli" :class="curIndex===2?'active':''" @click="curIndex=2">
          <view class="danjiCli_1" @click.stop="buylvHandle('v2')">直晋￥<text>{{buy_money.v2}}</text></view>
          <view class="danjiCli_c flex">
            <view class="danjiCli_cz">
              <image class="danjiCli_cz_img" mode="widthFix" src="/static/mine/img39.png"></image>
              <view class="danjiCli_cz_c" v-if="false">
                <image class="danjiCli_cz_c_i" mode="widthFix" src="/static/mine/img40.png"></image>
                <view class="danjiCli_cz_c_t">咨询</view>
              </view>
            </view>
            <view class="danjiCli_cy">
              <view class="danjiCli_cy1">V2 皓月会员</view>
              <view class="danjiCli_cy2">晋级条件：{{info.lv_up.v2}}</view>
              <view class="danjiCli_cy3 flex" v-for="(item1,index1) in tips.V2">
                <view class="danjiCli_cy3_1"></view>
                <view class="danjiCli_cy3_2">{{item1.content}}</view>
              </view>
            </view>
          </view>
          
        </view>
        <view class="danjiCli" :class="curIndex===3?'active':''" @click="curIndex=3">
          <view class="danjiCli_1" @click.stop="buylvHandle('v5')">直晋￥<text>{{buy_money.v5}}</text></view>
          <view class="danjiCli_c flex">
            <view class="danjiCli_cz">
              <image class="danjiCli_cz_img" mode="widthFix" src="/static/mine/img39.png"></image>
              <view class="danjiCli_cz_c" @click="isShow_zixun=true">
                <image class="danjiCli_cz_c_i" mode="widthFix" src="/static/mine/img40.png"></image>
                <view class="danjiCli_cz_c_t">咨询</view>
              </view>
            </view>
            <view class="danjiCli_cy">
              <view class="danjiCli_cy1">V5 璀璨董事</view>
              <view class="danjiCli_cy2">晋级条件：{{info.lv_up.v5}}</view>
              <view class="danjiCli_cy3 flex" v-for="(item2,index2) in tips.V5">
                <view class="danjiCli_cy3_1"></view>
                <view class="danjiCli_cy3_2">{{item2.content}}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="danjiCli" :class="curIndex===4?'active':''" @click="curIndex=4">
          <view class="danjiCli_1" @click.stop="buylvHandle('v9')">直晋￥<text>{{buy_money.v9}}</text></view>
          <view class="danjiCli_c flex">
            <view class="danjiCli_cz">
              <image class="danjiCli_cz_img" mode="widthFix" src="/static/mine/img39.png"></image>
              <view class="danjiCli_cz_c" @click="isShow_zixun=true">
                <image class="danjiCli_cz_c_i" mode="widthFix" src="/static/mine/img40.png"></image>
                <view class="danjiCli_cz_c_t">咨询</view>
              </view>
            </view>
            <view class="danjiCli_cy">
              <view class="danjiCli_cy1">V9 辉耀董事</view>
              <view class="danjiCli_cy2">晋级条件：{{info.lv_up.v9}}</view>
              <view class="danjiCli_cy3 flex" v-for="(item3,index3) in tips.V9">
                <view class="danjiCli_cy3_1"></view>
                <view class="danjiCli_cy3_2">{{item3.content}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="zhezhao" v-if="isShow_zixun" @click="isShow_zixun=false"></view>
    <!-- 咨询 -->
    <view class="tan tan_video" v-if="isShow_zixun">
      <image mode="widthFix" :src="info.zixun"></image>
    </view>
	</view>
</template>

<script>
  import {
    usertBuylv, //升级购买
    buylvTips //购买升级说明
  } from '@/request/api.js'
	export default {
		data() {
			return {
        openid: uni.getStorageSync('openid'), //获取缓存的openid
         isLogin: uni.getStorageSync('isLogin') || 1, //是否登录授权 1是未授权；2是已授权
         userInfo: uni.getStorageSync('userInfo'), //授权后的信息
				userInfo: uni.getStorageSync('userInfo'), //授权后的信息
        arrlv_if:[], //重组数据
        curIndex:0,
        buy_money:{},
        tips:{},
        isShow_zixun:false,
        info:{}
			};
		},
    onLoad() {
      // console.log('用户信息')
      // console.log(this.userInfo)
      // let lv_if = this.userInfo.lv_if
      // // 对象转数组
      // let arr = Object.values(lv_if)
      // this.arrlv_if = arr
      // console.log(arr)
      this.buylvTipsFun()
    },
    onShow() {
      console.log('用户信息')
      console.log(this.userInfo)
      let lv_if = this.userInfo.lv_if
      // 对象转数组
      let arr = Object.values(lv_if)
      this.arrlv_if = arr
      console.log(arr)
    },
    methods:{
      buylvTipsFun(){
        buylvTips().then(res=>{
          console.log('购买升级说明')
          console.log(res)
          if (res.error_code === 0) {
            this.info = res.data
            this.buy_money = res.data.buy_money
            this.tips = res.data.tips
          }else{
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },
      goInvite() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/invite'
          })
        }
      },
      // 购买
      buylvHandle(lv){
        console.log('购买')
        if (this.isLogin === 1) {
          console.log('未授权登录')
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          this.goPay(lv)
        }
      },
      // 去支付
      goPay(lv) {
        console.log('点击去支付')
        let param = {
          openid: this.openid,
          lv: lv
        }
        usertBuylv(param).then(res => {
          console.log(res)
          if (res.error_code === 0) {
            uni.requestPayment({
              provider: "wxpay",
              nonceStr: res.data.nonceStr,
              package: res.data.package,
              timeStamp: res.data.timeStamp,
              signType: res.data.signType,
              paySign: res.data.paySign,
              success(res) {
                console.log('调起支付')
                console.log(res)
                if (res.errMsg === 'requestPayment:ok') {
                  uni.showToast({
                    icon: 'none',
                    title: '支付成功'
                  })
                }
              },
              fail(err) {
                console.log('支付失败', err)
                if (err.errMsg === 'requestPayment:fail cancel') {
                  uni.showToast({
                    icon: 'none',
                    title: '支付失败'
                  })
                }
              }
            })
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },
    }
	}
</script>

<style lang="scss">
	.topWrap{
		width: 100%;
		height: auto;
		background-color: rgba(255,255,255,1);
		color: rgba(16,16,16,1);
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		.top{
			width: 100%;
			height: auto;
			margin-bottom: 24rpx;
			.top1{
				width: auto;
				height: auto;
				.top1_v1{
					width: 120rpx;
					height: auto;
					margin-bottom: 24rpx;
					display: block;
          border-radius: 40rpx;
				}
				.top1_v2{
					line-height: 56rpx;
					color: rgba(16,16,16,1);
					font-size: 40rpx;
					margin-bottom: 4rpx;
          font-weight: bold;
				}
				.top1_v3{
					line-height: 40rpx;
					color: rgba(16,16,16,1);
					font-size: 28rpx;
				}
			}
			.top2{
				width: 130rpx;
				height: auto;
				border-radius: 100%;
			}
		}
		.zhen{
			width: 100%;
			height: auto;
			align-items: normal;
			.zhen_z{
				width: 350rpx;
				height: auto;
				.zhen_z1{
					width: 100%;
					height: auto;
					margin-bottom: 24rpx;
					.zhen_z1c{
						width: 100%;
						height: 16rpx;
						border-radius: 20rpx;
						background-color: rgba(232,230,230,1);
						position: relative;
						margin-bottom: 10rpx;
            overflow: hidden;
						text{
							display: block;
							width: 0;
							border-radius: 20rpx;
							background-color: rgba(249,191,65,1);
							position: absolute;
							height: 16rpx;
							left: 0;
							top:0;
						}
					}
				}
        .zhen_z1:last-child{
          margin-bottom: 0;
        }
				.zhen_z2{
					line-height: 34rpx;
					color: rgba(137,137,137,1);
					font-size: 24rpx;
				}
			}
			.zhen_y{
				width: 160rpx;
				height: 44rpx;
				line-height: 44rpx;
				border-radius: 40rpx;
				background-color: rgba(249,191,65,1);
				color: rgba(16,16,16,1);
				color: rgba(0,0,0,1);
				font-size: 24rpx;
				text-align: center;
        margin-top: -15rpx;
			}
		}
	}
  .quany{
    width: 100%;
    border-radius: 20rpx;
    background-color: rgba(255,255,255,1);
    color: rgba(16,16,16,1);
    height: auto;
    padding: 30rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
    .quany_c{
      width: 100%;
      height: auto;
      .quany_cli{
        width: 310rpx;
        height: 112rpx;
        line-height: 112rpx;
        border-radius: 10rpx;
        background-color: rgba(255,246,228,1);
        color: rgba(0,0,0,1);
        font-size: 28rpx;
        text-align: center;
        justify-content: center;
        text{
          color: rgba(249,191,65,1);
          font-size: 40rpx;
          font-family: 'AvantGardeFont';
          margin-left: 4rpx;
        }
      }
    }
  }
  .quany_t{
    line-height: 40rpx;
    color: rgba(0,0,0,1);
    font-size: 28rpx;
    margin-bottom: 20rpx;
    font-weight: bold;
  }
  .xiam{
    margin-top: 60rpx;
    padding: 0 30rpx;
    width: 100%;
    box-sizing: border-box;
    .lisy{
      width: 100%;
      height: auto;
      .lisyli{
        width: 100%;
        height: auto;
        .lisyli_t{
          width: 100%;
          height: auto;
          margin-bottom: 8rpx;
          .lisyli_tz{
            width: 16rpx;
            height: 16rpx;
            border-radius: 100%;
            background-color: rgba(0,0,0,1);
            margin-right: 16rpx;
          }
          .lisyli_ty{
            color: rgba(16,16,16,1);
            font-size: 28rpx;
          }
          .lisyli_ty.weight{
            font-weight: bold;
          }
        }
        .lisyli_b{
          width: 100%;
          height: auto;
          align-items: normal;
          .lisyli_bz{
            width: 4rpx;
            height: 60rpx;
            background-color: rgba(187,187,187,1);
            margin-left: 7rpx;
            margin-right: 22rpx;
          }
          .lisyli_bz.nobg{
            background: transparent;
          }
          .lisyli_by{
            color: rgba(137,137,137,1);
            font-size: 24rpx;
          }
        }
      }
    }
  }
  .danji{
    width: 100%;
    height: auto;
    margin-top: 60rpx;
    .danji_t{
      color: rgba(0,0,0,1);
      font-size: 36rpx;
      margin-bottom: 30rpx;
      padding-left: 30rpx;
    }
    
    .danjiC{
      width: 100%;
      height: auto;
      .danjiCli{
        width: 100%;
        height: auto;
        position: relative;
        padding: 30rpx;
        box-sizing: border-box;
        border-radius: 20rpx;
        background-color: rgba(255,255,255,1);
        margin-bottom: 30rpx;
        .danjiCli_1{
          position: absolute;
          width: 300rpx;
          height: 76rpx;
          border-radius: 0px 20rpx 0px 100rpx;
          background-color: rgba(255,246,228,1);
          top:0;
          right: 0;
          text-align: right;
          line-height: 76rpx;
          color: rgba(16,16,16,1);
          font-size: 24rpx;
          padding-right: 30rpx;
          box-sizing: border-box;
          text{
            font-size: 40rpx;
          }
        }
        .danjiCli_c{
          width: 100%;
          height: auto;
          align-items: normal;
          .danjiCli_cz{
            width: 70rpx;
            text-align: center;
            height: 100%;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            margin-right: 30rpx;
            .danjiCli_cz_img{
              width: 100%;
              height: auto;
            }
            .danjiCli_cz_c{
              width: 70rpx;
              height: auto;
                  position: absolute;
                  bottom: 40rpx;
                  // left: 60rpx;
              .danjiCli_cz_c_i{
                width: 48rpx;
                height: auto;
              }
              .danjiCli_cz_c_t{
                color: rgba(155,155,155,1);
                font-size: 24rpx;
              }
            }
          }
          .danjiCli_cy{
            width: 500rpx;
            height: auto;
            .danjiCli_cy1{
              color: rgba(0,0,0,1);
              font-size: 32rpx;
              margin-bottom: 6rpx;
              font-weight: bold;
            }
            .danjiCli_cy2{
              color: rgba(16,16,16,1);
              font-size: 12px;
              margin-bottom: 20rpx;
              font-weight: bold;
            }
            .danjiCli_cy3{
              width: 100%;
              height: auto;
              margin-bottom: 10rpx;
              .danjiCli_cy3_1{
                width: 12rpx;
                height: 12rpx;
                background-color: rgba(155,155,155,1);
                border-radius: 100%;
                margin-right: 16rpx;
              }
              .danjiCli_cy3_2{
                color: rgba(155,155,155,1);
                font-size: 24rpx;
              }
            }
            .danjiCli_cy3:last-child{
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }
  .danji .danjiC .danjiCli.active{
    background-color: rgba(255,246,228,1);
  }
  .danji .danjiC .danjiCli.active .danjiCli_1{
    background-color: rgba(249,191,65,1);
  }
  .tan_video {
    width: 500rpx;
    height: auto;
    padding: 0 0;
    margin-left: -250rpx;
    background: #fff;
    margin-top: -350rpx;
  
    image {
      width: 90%;
      height: auto;
      display: block;
      margin: 20rpx auto;
    }
    }
</style>
